<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="/skin/font/iconfont.css" rel="stylesheet" type="text/css">
	<link href="/skin/css/amazeui.min1.css" rel="stylesheet" type="text/css" />
	<link href="/skin/css/index.css" rel="stylesheet" type="text/css" />
	<script src="/skin/js/jquery.js"></script>
	<meta name="Keywords" content="" />
	<meta name="Description" content="" />
	<title>{$sys[webname]}</title>
	<script>
		// 设计稿 750px，1rem = 100px，换算方法：px值 × 2 ÷ 100 = rem值
		// 例如：设计稿标注16px → 16 × 2 ÷ 100 = 0.32rem
		(function(){
			var docEl = document.documentElement;
			var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
			function recalc() {
				var clientWidth = docEl.clientWidth;
				if (!clientWidth) return;
				docEl.style.fontSize = (clientWidth / 3.75) + 'px';
			}
			if (!document.addEventListener) return;
			window.addEventListener(resizeEvt, recalc, false);
			document.addEventListener('DOMContentLoaded', recalc, false);
			recalc();
		})();
	</script>
	<style>
		a{-webkit-tap-highlight-color:transparent;outline:none;}
		body.cart {
			padding-bottom: 0;
		}
		body.cart .yh-nav {
			display: none;
		}
		
		/* 订单确认页面 */
		body.cart .order-confirm {
			padding: 0.16rem;
		}
		
		/* 商品卡片 */
		body.cart .product-card {
			background: #fff;
			border-radius: 0.04rem;
			padding: 0.16rem;
			margin-bottom: 0.14rem;
			display: flex;
			align-items: center;
			gap: 0.14rem;
		}
		body.cart .product-card .product-img {
			width: 1.2rem;
			height: 1.2rem;
			border-radius: 0.08rem;
			overflow: hidden;
			flex-shrink: 0;
		}
		body.cart .product-card .product-img img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			display: block;
		}
		body.cart .product-card .product-name {
			flex: 1;
			font-size: 0.14rem ;
			color: #31374C ;
			line-height: 1.5;
			font-weight: 600;
		}
		body.cart .product-card .product-delete {
			width: 0.32rem;
			height: 0.32rem;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			cursor: pointer;
			opacity: 0.6;
			transition: opacity 0.2s;
		}
		body.cart .product-card .product-delete:active {
			opacity: 1;
		}
		body.cart .product-card .product-delete img {
			width: 0.2rem;
			height: 0.2rem;
		}
		
		/* 寄送地址卡片 */
		body.cart .address-card {
			background: #fff;
			border-radius: 0.04rem;
			padding: 0.16rem;
			margin-bottom: 0.14rem;
		}
		body.cart .address-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 0.14rem;
		}
		body.cart .address-header .address-title{
			display: flex;
			align-items: center;
			gap: 0.08rem;
			font-size: 0.16rem ;
			font-weight: 700;
			color: #31374C ;
		}
		body.cart .address-header .address-title img {
			width: 0.3rem;
			height: 0.3rem;
		}
		body.cart .address-header .address-title span{
			font-size: 0.16rem ;
			color: #31374C ;
		}
		body.cart .address-edit {
			display: flex;
			align-items: center;
			gap: 0.04rem;
			font-size: 0.14rem ;
			color: #64748b ;
			text-decoration: none;
		}
		body.cart .address-edit span{
			font-size: 0.14rem ;
			color: #345643 ;
		}
		body.cart .address-edit img {
			width: 0.14rem;
			height: 0.14rem;
		}
		body.cart .address-info {
			font-size: 0.14rem ;
			color: #31374C ;
			line-height: 1.6;
		}
		body.cart .address-name {
			font-weight: 700;
			margin-right: 0.12rem;
			font-size: 0.14rem ;

		}
		body.cart .address-phone {
			font-weight: 700;
			font-size: 0.14rem ;
		}
		body.cart .address-detail {
			margin-top: 0.04rem;
			color: #64748b ;
			font-size: 0.12rem ;
			line-height: 1.6;
		}
		
		/* 交易方式卡片 */
		body.cart .payment-card {
			background: #fff;
			border-radius: 0.04rem;
			padding: 0.24rem;
			margin-bottom: 0.16rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		body.cart .payment-title {
			font-size: 0.14rem ;
			font-weight: 600;
			color: #31374C;
		}
		body.cart .payment-options {
			display: flex;
			gap: 0.32rem;
			align-items: center;
		}
		body.cart .payment-option {
			display: flex;
			align-items: center;
			gap: 0.08rem;
		}
		body.cart .payment-option input[type="radio"] {
			width: 0.18rem;
			height: 0.18rem;
			accent-color: #253043;
		}
		body.cart .payment-option label {
			font-size: 0.14rem ;
			color: #31374C ;
			cursor: pointer;
		}
		body.cart .payment-option input[type="radio"]:checked + label {
			color: #31374C;
			font-weight: 600;
		}
		
		/* 置换订单选择 */
		body.cart .exchange-section {
			margin-top: 0.16rem;
		}
		body.cart .exchange-divider {
			position: relative;
			text-align: center;
			margin: 0.16rem 0;
		}
		body.cart .exchange-divider::before {
			content: '';
			position: absolute;
			left: 0;
			right: 0;
			top: 50%;
			height: 0.01rem;
			background: #e5e7eb;
		}
		body.cart .exchange-divider-text {
			position: relative;
			display: inline-block;
			background: #f3f5f8;
			padding: 0 0.16rem;
			font-size: 0.12rem !important;
			color: #64748b !important;
		}
		body.cart .exchange-order-card {
			background: #fff;
			border-radius: 0.04rem;
			padding: 0.13rem .16rem;
			margin-bottom: 0.12rem;
			display: flex;
			align-items: center;
			gap: 0.12rem;
			cursor: pointer;
			transition: all 0.2s;
		position: relative;
		}
		body.cart .exchange-order-card:active {
			background: #f9fafb;
		}
		body.cart .exchange-order-card.selected {
		background: #fff;
		box-shadow: none;
		}
	body.cart .exchange-order-card .selected-badge {
		position: absolute;
		right: 0;
		bottom: 0;
		height: 0.24rem;
		display: none;
	}
	body.cart .exchange-order-card.selected .selected-badge {
		display: block;
	}
		body.cart .exchange-order-content {
			display: flex;
			align-items: center;
			padding: .12rem;
			background: #F7F7F7;
			flex: 1;
			border-radius: 0.08rem;
		}
		body.cart .exchange-check {
			display: none;  /* 隐藏选择框 */
		}
		body.cart .exchange-product-img {
			width: 0.8rem;
			height: 0.8rem;
			border-radius: 0.06rem;
			overflow: hidden;
			flex-shrink: 0;
		}
		body.cart .exchange-product-img img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
		body.cart .exchange-info {
			flex: 1;
			min-width: 0;
			margin-left: 0.12rem;
		}
		body.cart .exchange-product-name {
			font-size: 0.14rem !important;
			color: #111827 !important;
			font-weight: 600;
			line-height: 1.4;
		}
		body.cart .no-exchange-tip {
			text-align: center;
			padding: 0.4rem 0;
			color: #9ca3af !important;
			font-size: 0.13rem !important;
		}
		
		/* 底部按钮 */
		body.cart .order-bottom {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background: #fff;
			height: 0.66rem;
			padding: 0 0.16rem;
			border-top: 0.01rem solid #f0f2f5;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 100;
	}
	body.cart .order-summary {
		display: flex;
		align-items: baseline;
		gap: 0.04rem;
	}
	body.cart .order-summary-price {
		font-size: 0.22rem;
		font-weight: 600;
		color: #ef4444;
	}
	body.cart .price-symbol {
		font-size: 0.16rem;
		font-weight: 400;
		color: #ef4444;
	}
	body.cart .order-btn {
		width: 1.87rem;
		height: 0.44rem;
		background: #31374C;
		color: #fff;
		border: none;
		border-radius: 0.02rem;
		font-size: 0.15rem;
		font-weight: 600;
		cursor: pointer;
		box-shadow: none;
	}
	body.cart .order-btn:active {
		opacity: 0.8;
	}
	</style>
</head>
<body class="cart">
<header id="header">
	<section class="head-b head-b1">
		<span class="u-left"><a href="javascript:history.go(-1);" class="back"><img src="/skin/img/back.png"/></a></span>
		<h1 id="t0">订单确认</h1>
		<div class="u-right" href="#">
			<a href="/" class="hSearch right"><img src="/skin/img/i_home.png"/></a>
		</div>
	</section>
</header>

<div class="main">
	{if($clist)}
	<form class="order-confirm order">
		<input type='hidden' value="{$addlist[address]}" name='dz' />
		<input type='hidden' value="{$addlist[tname]}" name='xm' />
		<input type='hidden' value="{$addlist[phone]}" name='dh' />
		<input type='hidden' value="{$addlist[dzid]}" name='dzid' />
		
		<!-- 要置换的商品 -->
		{loop $clist $key as $list}
		<input type='hidden' value="{$list[color]}" name='c[]' />
		<input type='hidden' value="{$list[size]}" name='s[]' />
		<input type='hidden' value="{$list[Id]}" name='gid[]' />
		<input type='hidden' value="{$list[bticket]}" name='ticket[]' />
		<input type='hidden' value="{$list[bnum]}" name='num[]' />
		<div class="product-card" data-id="{$list[Id]}" data-price="{$list[cash]}" data-exchange-price="{$list[kuaidif]}" data-num="{$list[bnum]}">
			<div class="product-img">
				<img src="{$list[gthumb]}" alt="{$list[gname]}" />
			</div>
			<div class="product-name">{$list[gname]}</div>
			<div class="product-delete" data-id="{$list[bId]}">
				X
			</div>
		</div>
		{/loop}
		
		<!-- 寄送地址 -->
		<div class="address-card">
			<div class="address-header">
				<div class="address-title">
					<img src="/skin/img/icon_send.png" alt="寄送" />
					<span>寄送地址</span>
				</div>
				<a href="/user/address.php?t=1" class="address-edit">
					<img src="/skin/img/icon_green_edit.png" alt="编辑" />
					<span>更换地址</span>
				</a>
			</div>
			{if($addlist['tname'])}
			<div class="address-info">
				<span class="address-name">{$addlist[tname]}</span>
				<span class="address-phone">{$addlist[phone]}</span>
				<div class="address-detail">{$addlist[address]}</div>
			</div>
			{else}
			<div class="address-info">
				<a href="/user/address.php?t=1" style="color: #64748b;">请先添加收货地址</a>
			</div>
			{/if}
		</div>
		
		<!-- 交易方式 -->
		<div class="payment-card">
			<div class="payment-title">交易方式</div>
			<div class="payment-options">
				<div class="payment-option">
					<input type="radio" name="pay" value="1" id="pay_direct" checked />
					<label for="pay_direct">直接买</label>
				</div>
				{if($cplx==2)}
				<div class="payment-option">
					<input type="radio" name="pay" value="4" id="pay_exchange" />
					<label for="pay_exchange">置换</label>
				</div>
				{/if}
			</div>
		</div>
		
		<!-- 置换订单选择 -->
		<div class="exchange-section" id="exchangeSection" style="display:none;">
			<div class="exchange-divider">
				<span class="exchange-divider-text">选择要置换的订单</span>
			</div>
			<input type="hidden" name="exchange_oid" id="exchange_oid" value="" />
			<div id="exchangeOrdersList"></div>
		</div>
		
		<!-- 支付密码（如果需要） -->
		<div class="zhifuMm" style="display: none">
			<div class="payment-card">
				<div class="payment-title">支付密码</div>
				<input type="password" name="pwd" value="" placeholder="请输入支付密码" style="width:100%; border:0; background:transparent; outline:none; font-size:0.14rem; padding:0.08rem 0;" />
			</div>
		</div>
	</form>
	{else}
	<div class='no' style="text-align:center; padding:1rem; color:#64748b;">购物车是空的哦亲</div>
	{/if}
</div>

<!-- 底部按钮 -->
{if($clist)}
<div class="order-bottom">
	<div class="order-summary">
		<span class="price-symbol">¥</span>
		<span class="order-summary-price" id="totalPrice">0.00</span>
	</div>
	<button type="button" class="order-btn" id="confirmBtn">
		确认下单
	</button>
</div>
{/if}

<script>
	// 删除商品
	$(document).on("click", ".product-delete", function(e){
		e.stopPropagation();
		var id = $(this).data("id");
		if(!confirm("确认删除该商品？")) return;
		
		$.ajax({
			type:"post",
			dataType:"json",
			url:"/Moudelu.php?m=g&a=cartdel",
			data:"id="+id,
			success:function(d){
				if(d[0]==2){
					window.location.href='login.php';
				}else if(d[0]==0){
					alert(d[1]);
				}else{						
					window.location.href='cart.php';
				}
			}
		});
	});

	// 计算总价
	function calculateTotal() {
		var payValue = $("input[name='pay']:checked").val();
		var total = 0;
		
		$(".product-card[data-price]").each(function(){
			var num = parseFloat($(this).data("num")) || 0;
			var price = 0;
			
			if(payValue == '4') {
				// 置换价格
				price = parseFloat($(this).data("exchange-price")) || 0;
			} else {
				// 直接购买价格
				price = parseFloat($(this).data("price")) || 0;
			}
			
			total += num * price;
		});
		
		$("#totalPrice").text(total.toFixed(2));
	}
	
	// 置换订单数据
	var exchangeOrdersData = <?php echo $exchange_orders ? json_encode($exchange_orders) : '[]'; ?>;
	
	// 加载置换订单列表
	function loadExchangeOrders(){
		var html = '';
		if(exchangeOrdersData && exchangeOrdersData.length > 0){
			exchangeOrdersData.forEach(function(order, index){
				var selectedClass = index === 0 ? ' selected' : '';
				var glist = order.glist || [];
				var productImg = glist[0] ? glist[0].thumb : '';
				var productName = glist[0] ? glist[0].name : '';
				
				html += '<div class="exchange-order-card'+selectedClass+'" data-oid="'+order.Id+'" onclick="selectExchangeOrder(this, '+order.Id+')">';
				html += ' <div class="exchange-order-content">';
				html += '  <div class="exchange-product-img"><img src="'+productImg+'" alt="'+productName+'" /></div>';
				html += '  <div class="exchange-info">';
				html += '    <div class="exchange-product-name">'+productName+'</div>';
				html += '  </div>';
				html += ' </div>';
				html += ' <img class="selected-badge" src="/skin/img/have_select.jpg" alt="已选择" />';
				html += '</div>';
			});
			// 默认选中第一个
			$('#exchange_oid').val(exchangeOrdersData[0].Id);
		}else{
			html = '<div class="no-exchange-tip">暂无可置换订单</div>';
		}
		$('#exchangeOrdersList').html(html);
	}
	
	// 选择置换订单
	function selectExchangeOrder(element, oid){
		$('.exchange-order-card').removeClass('selected');
		$(element).addClass('selected');
		$('#exchange_oid').val(oid);
	}
	
	// 支付方式切换
	$("input[name='pay']").change(function(){
		var payValue = $(this).val();
		var btnText = payValue == '4' ? '立即置换' : '确认下单';
		$("#confirmBtn").text(btnText);
		
		// 显示/隐藏置换订单选择区域（无动画）
		if(payValue == '4') {
			loadExchangeOrders();
			$("#exchangeSection").show();
		} else {
			$("#exchangeSection").hide();
		}
		
		// 重新计算总价
		calculateTotal();
	});
	
	// 页面加载时计算一次
	$(document).ready(function(){
		calculateTotal();
	});

	// 确认下单/置换
	$("#confirmBtn").on('click',function(){
		var btn = $(this);
		var payValue = $("input[name='pay']:checked").val();
		
		// 如果是置换，检查是否选择了订单
		if(payValue == '4'){
			var selectedOid = $('#exchange_oid').val();
			if(!selectedOid){
				alert('请选择要置换的订单');
				return;
			}
		}
		
		btn.attr("disabled",true);
		$.ajax({
			type:"post",
			dataType:"json",
			url:"/Moudelu.php?m=g&a=orderc",
			data:$(".order").serialize(),
			success:function(d){
				btn.attr("disabled",false);
				if(d[0]==2){
					window.location.href='login.php';
				}else if(d[0]==1){
					alert(d[1]);
					// 根据商品专区类型跳转，而不是支付方式
					{if($cplx==2)}
					window.location.href='/user/orderlist.php?type=2';
					{else}
					window.location.href='/user/orderlist.php?type=1';
					{/if}
				}else if(d[0]==0){
					alert(d[1]);
				}else{
					window.location.href=d[1];
				}
			}
		});
	});
</script>
</body>
</html>
